<template>
  <el-col class="buill">
    <el-col class="title">电子发票列表</el-col>
    <el-col>
      <el-table :data="class_list" border stripe size="small">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column
          v-for="col in columns"
          :prop="col.id"
          :key="col.id"
          :label="col.label"
          :width="col.width"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">开票失败</template>
            <template v-if="scope.row.status == 1">
              <el-button type="success" size="mini">开票成功</el-button>
            </template>
            <template v-if="scope.row.status == 3">正在开票</template>
          </template>
        </el-table-column>
        <el-table-column label="商品数据">
          <template slot-scope="scope">
            <el-popover placement="right" width="800" trigger="click">
              <el-table :data="scope.row.order_content" border>
                <el-table-column
                  width="200"
                  property="com_name"
                  show-overflow-tooltip
                  label="商品名称"
                ></el-table-column>
                <el-table-column
                  width="100"
                  property="name"
                  label="总价（￥）"
                ></el-table-column>
                <el-table-column
                  width="82"
                  property="unit"
                  label="单位"
                ></el-table-column>
                <el-table-column
                  width="82"
                  property="com_num"
                  label="商品数量"
                ></el-table-column>
                <el-table-column
                  width="90"
                  property="com_price"
                  label="商品单价"
                ></el-table-column>
                <el-table-column
                  width="82"
                  property="discount"
                  label="折扣"
                ></el-table-column>
              </el-table>
              <el-button slot="reference" size="mini">查看</el-button>
            </el-popover>
            <!-- <el-button type="primary" size="mini" @click="datamin(scope.row)">查看</el-button> -->
          </template>
        </el-table-column>
        <el-table-column label="税率配置详情">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="click">
              <el-col>
                <span>税率配置名称：</span>
                <span>{{ scope.row.tax.name }}</span>
              </el-col>
              <el-col>
                <span>税率：</span>
                <span>{{ scope.row.tax.tax_rate }}%</span>
              </el-col>
              <el-button slot="reference" type="primary" size="mini"
                >查看</el-button
              >
            </el-popover>
            <!-- <el-button type="primary" size="mini" @click="datamin(scope.row)">查看</el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col class="class_bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
      <!-- <el-button type="primary" @click="add_class" size="mini">添加分类</el-button> -->
    </el-col>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      class_list: [],
      columns: [
        {
          id: "created_at",
          label: "申请开票时间",
        },
        {
          id: "user_name",
          label: "用户昵称",
        },
        {
          id: "document_num",
          label: "单据编号",
        },
        {
          id: "price",
          label: "开票金额（￥）",
        },
      ],
      total: 0,
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getlist(val);
    },
    async getlist(page) {
      //获取列表
      let data = {
        page: page,
      };
      let res = await this.$store.dispatch("invoice_log", data);
      this.class_list = res.data.data;
      this.total = res.data.total;
    },
  },
};
</script>
<style lang="scss" >
.buill {
  padding: 30px;
  text-align: left;
}
</style>